<template>
  <div class="content-box theme-demo">
    <h2 class="demo-title">自定义主题</h2>
    <p class="demo-introduction">基于css变量</p>
    <div class="side-editor">
      <ul>
        <li>
          <span>color-primary:</span>
          <el-color-picker
            v-model="defaultColor"
            @change="handChange"
          ></el-color-picker>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import utils from '../../public/js/utils'
export default {
  data() {
    return {
      defaultColor: '#409EFF',
    }
  },
  created() {
    this.defaultColor = localStorage.getItem('--color-primary') || '#409eff'
    this.handChange(this.defaultColor)
  },
  methods: {
    handChange(color) {
      utils.setTheme('--color-primary', color)
      localStorage.setItem('--color-primary', color)
    },
  },
}
</script>

<style lang="scss" scoped>
.theme-demo {
  .side-editor {
    overflow: hidden;
    background: #f5f7fa;
    border: 1px solid #ebeef5;
    border-radius: 5px;
    margin-bottom: 20px;
    width: 260px;
    ul {
      li {
        list-style: none;
        display: flex;
        align-items: center;
        span {
          color: #666;
          font-size: 14px;
          margin-right: 6px;
        }
      }
    }
  }
}
</style>
